<template>
  <div class="box">
      第一个盒子
  </div>
  <!-- 要检测得元素添加个名字 -->
  <div class="box" ref="target">
      第二个盒子
  </div>
</template>

<script>
import { ref } from 'vue'
import { useIntersectionObserver } from '@vueuse/core'
export default {
  setup () {
    const target = ref(null)

    const { stop } = useIntersectionObserver(
      target,
      ([{ isIntersecting }], observerElement) => {
        if (isIntersecting) {
          console.log('isIntersecting元素可见性，发送请求获取数据', isIntersecting)
          stop()
        }
      }
    )
    return { target }
  }
}
</script>

<style lang="less" scoped>
.box{
    width: 400px;
    height: 100px;
background-color: pink;
  margin: 500px auto;
}
</style>
